<template>
  <div class="rightArea h">
    <div class="header flex vcenter">
      <div style="margin-left:5%">新的朋友</div>
    </div>
    <div class="chatBox flex vcenter column">
      <div v-for="(item, index) in friendRequestList" :key="index" class="applyBox flex vcenter bottomBorder">
        <el-avatar shape="square" icon="el-icon-user-solid" class="m10 mid"></el-avatar>
        <div class="f1 flex column evenly" style="height:calc(100% - 20px);">
          <div class="midFont">{{item.username}}</div>
          <div class="smallFont grayText">{{item.account}}</div>
        </div>
        <div>
          <el-button-group v-if="item.processStatus == 'unhandled'">
            <el-button @click="precessFriendRequest('accept', item)" type="success" size="mini" >同意</el-button>
            <el-button @click="precessFriendRequest('reject', item)" type="success" size="mini" >拒绝</el-button>
          </el-button-group>
          <span v-else-if="item.processStatus == 'accept'" class="midFont grayText ">已添加</span>
          <span v-else-if="item.processStatus == 'reject'" class="midFont grayText">已拒绝</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      friendRequestList: [],
    }
  },
  mounted(){
    this.showApplyFriendList()
  },
  methods: {
    showApplyFriendList(){
      this.$axios.post('http://localhost:3000/user/getFriendRequestList', { userData: this.$store.state.chatUserInfo })
        .then((res) => {
          // console.log(res);
          this.friendRequestList = res.data.friendRequestList
        })
    },
    precessFriendRequest(applyResult, applyUserData){
      this.$axios.post('http://localhost:3000/user/precessFriendRequest', { applyResult, applyUserData, userData: this.$store.state.chatUserInfo })
        .then((res) => {
          console.log(res);
          if (applyResult == 'accept') {
            this.$store.commit('setChackChatUser', { username: applyUserData.username, account: applyUserData.account })
            this.$router.push("/chat")
          }else if(applyResult == 'reject'){
            this.showApplyFriendList()
          }
        })
    },
  },
}
</script>

<style>
.chatBox{
  width: 100%;
  height: 90%;
  border-top: 1px solid rgb(214, 214, 214);
}
.applyBox{
  height: 12%;
  width: 80%;
}
</style>